<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        维修工单详情
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../css/main.css" media="all">
    <script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <link rel="stylesheet" href="../../lib/layui/css/layui_2.5.7.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .layui-table-page select {
            height: 22px;
        }
        #container {
            height: 100%;
            width: 100%;
        }

        .amap-icon img {
            width: 25px;
            height: 34px;
        }

        .amap-marker-label{
            border: 0;
            background-color: transparent;
        }

        .info{
            position: relative;
            top: 0;
            right: 0;
            min-width: 0;
        }
        .amap-marker-label{background-color: #fff; padding: 10px; color: red;}
    </style>
</head>

<body>
<div class="layui-tab-content">
    <h2>工单详情</h2>

    <div class="modal-body" id="app">
        <div class="row">
            <div class="col-xs-6">

                <div class="box-body with-border">
                    <ul style="line-height:28px;padding-left: 15px;" class="orderInfo">
                        <li><h3>电梯信息</h3>
                            <ul>
                                <li>使用单位：{{companyname}}</li>
                                <li>项目名称：{{projectname}}</li>
                                <li>电梯位置：{{address}}</li>
                            </ul>
                        </li>

                        <li><h3>报修信息</h3>
                            <ul>
                                <li>报修人： {{repairperson}}/{{tel}}</li>
                                <li>备注信息：{{reportremark}}</li>
                            </ul>
                        </li>



                        <li><h3>维修信息</h3>
                            <ul>
                                <li>工单编号：{{numbercode}}</li>
                                <li>维保人员：{{person}}</li>
                                <li>备注信息：{{remark}}</li>
                            </ul>
                        </li>
                    </ul>
                    <div id="logsDetailes">
                        <ul class="nav nav-tabs" id="logsStaff">
                            <li  class="active"><a data-toggle="tab">{{person}}</a>
                            </li>

                        </ul>
                        <div class="tab-content" style="max-height: 240px;overflow: auto">
                            <div class="tab-pane active" id="logsList">
                                <p id="staffStatus">状态：{{status}}，耗时： <span
                                        class="label label-badge label-info ">{{timeConsuming}}</span></p>
                                <table class="table table-bordered" style="text-align:center;margin: 10px 0">
                                    <thead>
                                    <tr>
                                        <th nowrap="nowrap" style="text-align:center">状态</th>
                                        <th nowrap="nowrap" style="text-align:center">时间</th>
                                        <th nowrap="nowrap" style="text-align:center">操作位置</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    <tr v-if="startTime != null">
                                        <th style="text-align:center;vertical-align: middle;">开始维修</th>
                                        <td nowrap="nowrap" style="vertical-align: middle;">{{startTime}}</td>
                                        <td style="max-width:210px;" align="left">{{startAddress}}

                                        </td>
                                    </tr>
                                    <tr v-if="endTime != null">
                                        <th style="text-align:center;vertical-align: middle;">结束维修</th>
                                        <td nowrap="nowrap" style="vertical-align: middle;">{{endTime}}</td>
                                        <td style="max-width:210px;" align="left">{{endAddress}}

                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#tab_1" data-toggle="tab" id="mapInfo">位置信息</a></li>
                        <li><a href="#tab_2" data-toggle="tab">图片信息 <span data-val="all"
                                                                          class="label label-badge count">{{photoNum}}</span></a>
                        </li>
                        <li><a href="#tab_3" data-toggle="tab">故障项目</a></li>
                        <li><a href="#tab_4" data-toggle="tab">电梯信息 </a></li>
                        <!--<li><a href="#tab_5" data-toggle="tab">更换配件 </a></li>-->
                    </ul>
                    <div class="tab-content" style="padding: 0;">
                        <div class="tab-pane active" id="tab_1">
                            <p style="color: #666666;margin: 10px 0;">提示：如果没有电梯位置标识，请及时进行电梯定位操作。</p>
                            <div id="mapBox" style="height: 420px; position: relative; background: rgb(252, 249, 242);"
                                 class="amap-container">
                                <div id="container"></div>
                            </div>

                        </div>

                        <div class="tab-pane" id="tab_2" style="height: 460px;padding-top: 5px">
                            <ul class="nav nav-tabs">
                                <li class="active"><a href="#imageBox1" data-toggle="tab" id="imageFirst">现场照片 <span
                                        data-val="xcCount"
                                        class="label label-badge count">{{maintenancePhotoNum}}</span></a>
                                </li>
                                <li><a href="#imageBox2" data-toggle="tab">工单照片
                                    <span data-val="gdCount" class="label label-badge count">{{workOrderPhotoNum}}</span></a></li>
                                <li><a href="#imageBox3" data-toggle="tab">电子工单照片
                                    <span data-val="signCount" class="label label-badge count">{{electronPhotoNum}}</span></a></li>

                            </ul>
                            <div class="tab-content" style="max-height: 430px;padding-top: 10px">
                                <div class="tab-pane active" id="imageBox1">
                                    维修前：

                                    <div v-for="image in picturesBeforeMaintenanceList">
                                        <img :src="bindSrcBillAttachment(image)" width="200" height="200" alt=""
                                             class="layui-upload-img" onclick="previewImg(this)">
                                    </div>
                                    维修后：

                                    <div v-for="image in picturesAfterMaintenanceList">
                                        <img :src="bindSrcBillAttachment(image)" width="200" height="200" alt=""
                                             class="layui-upload-img" onclick="previewImg(this)">
                                    </div>


                                </div>
                                <div class="tab-pane" id="imageBox2">
                                    <div v-for="image in workOrderPhotoList">
                                        <img :src="bindSrcBillAttachment(image)" width="200" height="200" alt=""
                                             class="layui-upload-img" onclick="previewImg(this)">
                                    </div>
                                </div>
                                <div class="tab-pane " id="imageBox3">
                                    <div v-for="image in electronPhotoList">
                                        <img :src="bindSrcBillAttachment(image)" width="200" height="200" alt=""
                                             class="layui-upload-img" onclick="previewImg(this)">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane" id="tab_3" style="height: 460px;overflow: auto;">
                            <table class="table table-bordered table-condensed table-hover" width="100%"
                                   style="margin-top: 10px;">
                                <thead>
                                <tr>
                                    <th nowrap="nowrap" style="width: 25%;text-align: center">项目</th>
                                    <th nowrap="nowrap" style="width: 30%;text-align: center">要求</th>
                                    <th nowrap="nowrap" style="width: 10%;text-align: center">原因</th>
                                    <th nowrap="nowrap" style="width: 10%;text-align: center">保养人</th>
                                    <th nowrap="nowrap" style="width: 20%;text-align: center">保养时间</th>
                                    <th nowrap="nowrap" style="width: 20%;text-align: center">是否报修</th>
                                    <th nowrap="nowrap" style="width: 20%;text-align: center">是否维修</th>
                                </tr>
                                </thead>
                                <tbody>

                                <tr v-for="fault in faultList">
                                    <td align="center">{{fault.program}}</td>
                                    <td align="center">{{fault.requirement}}</td>
                                    <td align="center">{{fault.reason}}</td>
                                    <td align="center">{{fault.matinperson}}</td>
                                    <td align="center">{{fault.matintime}}</td>
                                    <td align="center">{{fault.isReport}}</td>
                                    <td align="center">{{fault.isRepair}}</td>
                                </tr>

                                </tbody>
                            </table>
                        </div>
                        <div class="tab-pane" id="tab_4" style="height: 460px;overflow: auto;">
                            <table id="eleInfo" class="table table-bordered table-condensed" style="margin-top: 10px;">
                                <tbody>
                                <tr>
                                    <th style="text-align: center;" align="center" colspan="2">电梯信息</th>
                                </tr>
                                <tr>
                                    <th width="40%">电梯类型</th>
                                    <td>{{typename}}</td>
                                </tr>
                                <tr>
                                    <th>使用单位</th>
                                    <td>{{companyname}}</td>
                                </tr>
                                <tr>
                                    <th>项目名称</th>
                                    <td>{{projectname}}厦</td>
                                </tr>
                                <tr>
                                    <th>电梯品牌</th>
                                    <td>{{brandname}}</td>
                                </tr>
                                <tr>
                                    <th>制造单位</th>
                                    <td>{{makecompany}}</td>
                                </tr>
                                <tr>
                                    <th>制造日期</th>
                                    <td>{{makeDate}}</td>
                                </tr>
                                <tr>
                                    <th>安装单位</th>
                                    <td>{{installcompany}}</td>
                                </tr>
                                <tr>
                                    <th>载重</th>
                                    <td>{{maxload}}</td>
                                </tr>
                                <tr>
                                    <th>层站数</th>
                                    <td>{{floorsnumber}}</td>
                                </tr>
                                <tr>
                                    <th>控制方式</th>
                                    <td>{{controlmode}}</td>
                                </tr>
                                <tr>
                                    <th>额定速度</th>
                                    <td>{{speed}}</td>
                                </tr>
                                <tr>
                                    <th>出厂编号</th>
                                    <td>{{factorynumber}}</td>
                                </tr>
                                <tr>
                                    <th>运行方式</th>
                                    <td>{{operationmode}}</td>
                                </tr>
                                <tr>
                                    <th>设备型号</th>
                                    <td>{{equipmentmodel}}</td>
                                </tr>
                                <tr>
                                    <th>使用证编号</th>
                                    <td>{{numbercode}}</td>
                                </tr>
                                <tr>
                                    <th>注册代码</th>
                                    <td>{{regcode}}</td>
                                </tr>
                                <tr>
                                    <th>注册单位</th>
                                    <td>{{regcompany}}</td>
                                </tr>
                                <tr>
                                    <th style="text-align: center;" align="center" colspan="2">合同信息</th>
                                </tr>
                                <tr>
                                    <th>付款日期</th>
                                    <td>{{paymentDate}}</td>
                                </tr>
                                <tr>
                                    <th>维保合同到期时间</th>
                                    <td>{{maintenanceEndDate}}</td>
                                </tr>
                                <tr>
                                    <th>合同联系人</th>
                                    <td>{{contactperson}}</td>
                                </tr>
                                <tr>
                                    <th>联系电话</th>
                                    <td>{{contacttel}}</td>
                                </tr>
                                <tr>
                                    <th>配件约定</th>
                                    <td>{{parts}}</td>
                                </tr>
                                <tr>
                                    <th>税收票证</th>
                                    <td>{{taxticket}}</td>
                                </tr>
                                <tr>
                                    <th style="text-align: center;" align="center" colspan="2">年检信息</th>
                                </tr>
                                <tr>
                                    <th>检验人员</th>
                                    <td>{{checkperson}}</td>
                                </tr>
                                <tr>
                                    <th>检验单位</th>
                                    <td>{{checkcompany}}</td>
                                </tr>
                                <tr>
                                    <th>年检报告编号</th>
                                    <td>{{reportcode}}</td>
                                </tr>
                                <tr>
                                    <th>年检日期</th>
                                    <td>{{yearcheckDate}}</td>
                                </tr>
                                <tr>
                                    <th>下次年检日期</th>
                                    <td>{{nextyearcheckDate}}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <!--<div class="tab-pane" id="tab_5" style="height: 460px;overflow: auto;padding-top: 15px">
                            <ul>
                                <li class="partsOrderBox">配件信息（0）
                                    <ul></ul>
                                </li>
                            </ul>
                        </div>-->
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>
</body>


<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/myAjax.js"></script>
<script type="text/javascript" src="../../js/pub.js"></script>
<script type="text/javascript" src="../../lib/layui/layui2.5.7.js"></script>
<script type="text/javascript" src="../../js/vue.min.js"></script>
<!-- <script src="lib/layui/layui.js" charset="utf-8"></script> -->
<script src="../../js/x-layui.js" charset="utf-8"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=87be6752b4c542084e82804632ca8f28"></script>

<script>
    layui.use(['laydate', 'element', 'laypage', 'layer', 'form'], function () {
        $ = layui.jquery;//jquery
        laydate = layui.laydate;//日期插件
        lement = layui.element;//面包导航
        laypage = layui.laypage;//分页
        layer = layui.layer;//弹出层
        var form = layui.form;
        okLoading.close($);
    });
</script>


<script>
    var recordId = getQueryVariable("recordId");
    const vm = new Vue({
        el: "#app",
        data: {
            companyname:null,
            projectname:null,
            address:null,
            addressdetail:null,
            numbercode:null,
            person:null,
            repairperson:null,
            tel:null,
            reportremark:null,
            status:null,
            remark:null,
            timeConsuming :null,
            startTime :null,
            endTime :null,
            startAddress:null,
            endAddress:null,
            addressLongitude:null,
            addressLatitude:null,
            electronPhotoList:null,
            workOrderPhotoList:null,
            picturesAfterMaintenanceList:null,
            picturesBeforeMaintenanceList:null,
            typename:null,
            brandname:null,
            usenumber:null,
            makecompany:null,
            makeDate:null,
            installcompany:null,
            maxload:null,
            floorsnumber:null,
            controlmode:null,
            speed:null,
            factorynumber:null,
            operationmode:null,
            equipmentmodel:null,
            regcode:null,
            regcompany:null,
            paymentDate:null,
            maintenanceEndDate:null,
            contactperson:null,
            contacttel:null,
            parts:null,
            taxticket:null,
            checkperson:null,
            checkcompany:null,
            reportcode:null,
            yearcheckDate:null,
            nextyearcheckDate:null,
            photoNum:0,
            maintenancePhotoNum:0,
            workOrderPhotoNum:0,
            electronPhotoNum:0,
            faultList:null,
        },
        created() {

            let request = {
                url: 'maintenance/repair/detail',
                data: {
                    userId: $userId,
                    id: recordId
                },
                method: "POST"
            }
            sendRequest(request, (res) => {
                this.companyname = res.data.elevator.company.name;
                this.projectname = res.data.elevator.project.name;
                this.address = res.data.elevator.address;
                this.reportremark= res.data.reportRepair.remark;
                this.repairperson= res.data.reportRepair.repairperson;
                this.tel= res.data.reportRepair.tel;
                this.numbercode = res.data.repair.numbercode;
                this.person = res.data.mainpersonList[0];
                this.status = res.data.repair.status;

                this.remark = res.data.repair.remark;
                this.timeConsuming = res.data.repair.timeConsuming;

                this.startTime = res.data.repair.startTime;
                this.endTime = res.data.repair.endTime;

                this.startAddress = res.data.repair.startAddress;
                this.endAddress = res.data.repair.endAddress;
                this.addressLongitude = res.data.elevator.addressLongitude;
                this.addressLatitude = res.data.elevator.addressLatitude;
                this.addressdetail = res.data.elevator.addressdetail;

                if(res.data.repair.electronPhoto!=null){
                    this.electronPhotoNum = res.data.repair.electronPhoto.split(",").length;
                    this.electronPhotoList = res.data.repair.electronPhoto.split(",");     //电子工单照片
                }

                if(res.data.repair.workOrderPhoto!=null){
                    this.workOrderPhotoNum = res.data.repair.workOrderPhoto.split(",").length;
                    this.workOrderPhotoList = res.data.repair.workOrderPhoto.split(",");     //工单照片
                }
                var afternum = 0;
                var beforenum = 0;
                if(res.data.repair.picturesAfterMaintenance!=null){
                    afternum = res.data.repair.picturesAfterMaintenance.split(",").length;
                    this.picturesAfterMaintenanceList = res.data.repair.picturesAfterMaintenance.split(",");     //现场照片
                }
                if(res.data.repair.picturesBeforeMaintenance!=null){
                    beforenum = res.data.repair.picturesBeforeMaintenance.split(",").length;
                    this.picturesBeforeMaintenanceList = res.data.repair.picturesBeforeMaintenance.split(",");     //维修前照片
                }
                this.maintenancePhotoNum = beforenum+afternum;
                this.photoNum = this.maintenancePhotoNum+this.workOrderPhotoNum+this.electronPhotoNum;

                this.typename=res.data.elevator.type.name;
                this.brandname=res.data.elevator.brand.name;
                this.usenumber=res.data.elevator.usenumber;
                this.makecompany=res.data.elevatorParameter.makecompany;
                this.makeDate=res.data.elevatorParameter.makeDate;
                this.installcompany=res.data.elevatorParameter.installcompany;
                this.maxload=res.data.elevatorParameter.maxload;
                this.floorsnumber=res.data.elevatorParameter.floorsnumber;
                this.controlmode=res.data.elevatorParameter.controlmode;
                this.speed=res.data.elevatorParameter.speed;
                this.factorynumber=res.data.elevatorParameter.factorynumber;
                this.operationmode=res.data.elevatorParameter.operationmode;
                this.equipmentmodel=res.data.elevatorParameter.equipmentmodel;
                this.regcode=res.data.elevatorParameter.regcode;
                this.regcompany=res.data.elevatorParameter.regcompany;
                this.paymentDate=res.data.elevatorInformation.paymentDate;
                this.maintenanceEndDate=res.data.elevatorInformation.maintenanceEndDate;
                this.contactperson=res.data.elevatorInformation.contactperson;
                this.contacttel=res.data.elevatorInformation.contacttel;
                this.parts=res.data.elevatorInformation.parts;
                this.taxticket=res.data.elevatorInformation.taxticket;
                this.checkperson=res.data.elevatorInformation.checkperson;
                this.checkcompany=res.data.elevatorInformation.checkcompany;
                this.reportcode=res.data.elevatorInformation.reportcode;
                this.yearcheckDate=res.data.elevatorInformation.yearcheckDate;
                this.nextyearcheckDate=res.data.elevatorInformation.nextyearcheckDate;
                this.faultList = res.data.faultList;

            })

        },
        computed: {},
        methods: {
            bindSrcBillAttachment(value) {
                return $baseUrl +
                    'other/viewUploadFile?id=' + value;
            },
        },


    });
</script>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=jA0VzOF5uYehineGKLNc1FBIPGDSyO7R"></script>
<script>
    setTimeout(function(){

        var map = new BMap.Map("container");

        var addressLongitude = vm.addressLongitude;
        var addressLatitude = vm.addressLatitude;

        var point = new BMap.Point(addressLongitude, addressLatitude);


        map.centerAndZoom(point,15);
        map.enableScrollWheelZoom(true);

        var myIcon = new BMap.Icon("../../images/dt.png", new BMap.Size(52, 60));


        var marker = new BMap.Marker(point, {
            icon: myIcon
        });
        // 将标注添加到地图
        map.addOverlay(marker);


        var opts = {
            width: 350,
            height: 50,
            title: vm.address
        };


        var infoWindow = new BMap.InfoWindow('地址：'+vm.addressdetail, opts);

        marker.addEventListener('click', function () {
            map.openInfoWindow(infoWindow, point);
        });
    },300);




</script>
<script>
    function previewImg(obj) {
        var img = new Image();
        img.src = obj.src;
        //var height = img.height + 50; // 原图片大小
        //var width = img.width; //原图片大小
        var imgHtml = "<img src='" + obj.src + "' width='500px' height='500px'/>";
        //弹出层
        layer.open({
            type: 1,
            shade: 0.8,
            offset: 'auto',
            area: [500 + 'px', 550 + 'px'],  // area: [width + 'px',height+'px']  //原图显示
            shadeClose: true,
            scrollbar: false,
            title: "图片预览", //不显示标题
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function () {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
            }
        });
    }


</script>

</html>
